<script setup>
import { ref } from 'vue'
import { uploadfile } from '@/api/file'
import { getVendorList } from '@/api/setting'
import { getField } from '@/api/equipment/fields'
import { addDevice } from '@/api/equipment/device'
import { useUserStore, useAdminStore } from '@/stores';

const userStore = useUserStore()
const adminStore = useAdminStore()
const fileUpload = ref()
const uploadRef = ref()
const deviceInfo = ref({
  id: '',
  name: '',
  typeId: '', //设备类型
  model: '', //规格型号
  code: '', //编号
  vendorId: '',
  purchaseDate: '',
  deptId: userStore.userInfo.deptId,
  useStatusId: '',
  servicePeriod: '',
  depreciationPeriod: '',
  pictureUrl: '',
  documentsUrl: '',
})
const deptProps = {
  label: 'name',
  value: 'id',
  children: 'children'
}
const deviceInfoRef = ref()
const deviceTypeList = ref([])
const useStatusList = ref([])
// 初始化数据
getField('', '', 'deviceType').then(res => {
  deviceTypeList.value = res.data.data
})
getField('', '', 'useStatus').then(res => {
  useStatusList.value = res.data.data
})
const handleChange = (file) => {
  console.log(uploadRef.value)
  fileUpload.value = file
  console.log(file)
}
const uploadBtn = async () => {
  const formdata = new FormData()
  formdata.append("bucketName", "equipment")
  formdata.append("multipartFile", fileUpload.value.raw)

  const res = await uploadfile(formdata)
  console.log(res)
  uploadRef.value.submit()
}
const vendorList = ref([])
async function handleVendorList() {
  await getVendorList().then(res => {
    console.log("vendor:", res.data.data)
    vendorList.value = res.data.data
  })
}
handleVendorList()

// TODO 还缺少图片设备文档链接
async function submitForm() {

  await deviceInfoRef.value.validate(async (valid) => {
    console.log(valid)
    if (valid) {
      await addDevice(deviceInfo.value).then(res => {
        console.log(res)
      })
    } else {
      ElMessage.error('请检查表单')
    }
  })
}
const deviceFormRules = ref({
  name: [
    { required: true, message: '请输入设备名称', trigger: 'blur' },
    { min: 1, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入设备编号', trigger: 'blur' },
  ],
  model: [
    { required: true, message: '请输入规格型号', trigger: 'blur' },
    { min: 1, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  typeId: [
    { required: true, message: '请选择设备类型', trigger: 'blur' },
  ],
  vendorId: [
    { required: true, message: '请选择供应商名称', trigger: 'blur' },
  ],
  deptId: [
    { required: true, message: '请选择使用部门', trigger: 'blur' },
  ],
  statusId: [
    { required: true, message: '请选择设备状态', trigger: 'blur' },
  ]
})
</script>

<template>
  <div class="container">
    <el-text tag="b" size="large" style="line-height: 50px; vertical-align: middle">基本信息</el-text>
    <el-row class="basicRow">
      <el-form :model="deviceInfo" ref="deviceInfoRef" class="basicInfo" inline label-width="100px"
        :rules="deviceFormRules">
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="deviceInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="设备编号" prop="code">
          <el-input v-model="deviceInfo.code"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" prop="typeId">
          <el-select v-model="deviceInfo.typeId">
            <el-option v-for="(item, index) in deviceTypeList" :key="index" :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用状态" prop="useStatusId">
          <el-select v-model="deviceInfo.useStatusId">
            <el-option v-for="(item, index) in useStatusList" :key="index" :label="item.name"
              :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用年限">
          <el-input-number v-model="deviceInfo.servicePeriod" :precision="1" :step="0.1" min="0" size="small" style="margin-right:
            0.5rem;"></el-input-number>
          <el-text>年</el-text>
        </el-form-item>
        <el-form-item label="折旧年限">
          <el-input-number v-model="deviceInfo.depreciationPeriod" :precision="1" :step="0.1" min="0" size="small"
            style="margin-right: 0.5rem;"></el-input-number>
          <el-text>年</el-text>
        </el-form-item>
        <el-form-item label="规格型号" prop="model">
          <el-input v-model="deviceInfo.model"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称" prop="vendorId">
          <el-select v-model="deviceInfo.vendorId">
            <el-option v-for="(item, index) in vendorList" :key="index" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label=" 使用部门" prop="">
          <el-tree-select v-model="deviceInfo.deptId" :data="adminStore.deptList" :props="deptProps">

          </el-tree-select>
        </el-form-item>
        <el-form-item label="购入日期" prop="">
          <el-date-picker v-model="deviceInfo.purchaseDate"></el-date-picker>
        </el-form-item>
      </el-form>
    </el-row>

    <el-text tag="b" size="large">图片信息 </el-text>
    <el-text>(支持jpg/png文件上传)</el-text>
    <el-row class="picture">
      <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
    </el-row>
    <el-text tag="b" size="large">资料信息</el-text>
    <el-text>(支持doc、docx和pdf文件上传)</el-text>
    <el-row class="documents">
      <el-upload accept=".doc,.docx,.pdf" class="upload-demo" action="#" multiple :on-change="handleChange"
        :auto-upload="false" ref="uploadRef">
        <!-- <el-button type="primary">选择文件</el-button>
      <el-button type="success">上传文件</el-button> -->
        <template #trigger>
          <el-button type="primary">选择文件</el-button>
        </template>
        <template #default>
          <el-button type="success" @click="uploadBtn" style="margin-left: 10px">文件上传</el-button>
        </template>
      </el-upload>
    </el-row>
    <div class="affix-container">
      <el-affix target=".container" position="bottom" :offset="20">
        <el-button type="primary" @click="submitForm">确认新增设备数据</el-button>
      </el-affix>
    </div>

  </div>

</template>

<style scoped lang="less">
.basicInfo,
.picture,
.documents {
  margin: 20px 10px;
}

.basicInfo {
  .el-select {
    width: 160px;
    height: 30px;
    padding: 1px 11px;
  }
}


.avatar-uploader .avatar {
  padding: 20px 20px;
  width: 150px;
  height: 150px;
  display: block;
}

.affix-container {
  text-align: center;
}

.el-input-number {
  width: 100px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  text-align: center;
}
</style>